<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar top="13em" :viewerSource="viewerSource" />
    <div class="tool-box-top-left">
      <div class="select-box-wrapper">
        <select-box :options="flyOptions" style="margin-right: 10px;" />
        <!-- <a-radio-group v-model:value="viewFrom" size="small" button-style="solid">
          <a-radio-button value="top" style="min-width: 4em;text-align: center;">top</a-radio-button>
          <a-radio-button value="side" style="min-width: 4em;text-align: center;">side</a-radio-button>
          <a-radio-button value="aircraft" style="min-width: 4em;text-align: center;">aircraft</a-radio-button>
        </a-radio-group> -->
      </div>
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';
import merge from '@g3x/utils/merge';

const $g3vOptions = {
  // defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false,
        scene3DOnly: true,
        // sceneMode: Cesium.SceneMode.SCENE2D,
        animation: false
      },
      layers: [
        { type: 'osmImagery', options: { brightness: 1, show: false } },
        { type: 'arcgisStreetMap', options: { brightness: 1, show: false } },
        { type: 'bingMapsImagery', options: { brightness: 1, show: false } },
        { type: 'tdtIboMap', options: { brightness: 1, show: false } },
        { type: 'tdtImgAnno', options: { brightness: 1, show: false } },
        {
          type: 'graticule',
          options: {
            brightness: 1,
            show: true
          }
        }
      ],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: false //启用以太阳为光源的地球
      },
      bottomContainer: false,
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      shortcutAction: false,
      hideLayers: false
    }
  ]
};

export default defineComponent({
  name: 'GIBS', // GIBS时间序列数据
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    const viewFrom = ref('');
    return { viewFrom };
  },
  data() {
    return {
      flyOptions: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return $g3vOptions;
    },
    onViewerInited() {
      console.log('gdp onViewerInited');
    },
    initEffects() {
      const vm = this;
      const { viewer } = vm;
      const globe = viewer.scene.globe;

      function dataCallback(interval, index) {
        var time;
        if (index === 0) {
          // leading
          time = Cesium.JulianDate.toIso8601(interval.stop);
        } else {
          time = Cesium.JulianDate.toIso8601(interval.start);
        }

        return {
          Time: time
        };
      }

      var times = Cesium.TimeIntervalCollection.fromIso8601({
        iso8601: '2019-07-30/2021-09-07/P1D',
        leadingInterval: true,
        trailingInterval: true,
        isStopIncluded: false, // We want stop time to be part of the trailing interval
        dataCallback: dataCallback
      });

      // Add a WMTS imagery layer.
      // This comes from NASA's GIBS API.
      // See https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+API+for+Developers#GIBSAPIforDevelopers-OGCWebMapService(WMS)
      // https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products#expand-EarthatNight5Products
      const dataSources = [
        'MODIS_Terra_CorrectedReflectance_TrueColor',
        'MODIS_Terra_CorrectedReflectance_Bands721',
        'MODIS_Terra_CorrectedReflectance_Bands367',
        'MODIS_Terra_SurfaceReflectance_Bands121',
      ]
      var provider = new Cesium.WebMapTileServiceImageryProvider({
        url: `https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/${dataSources[0]}/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg`,
        layer: 'MODIS_Terra_CorrectedReflectance_TrueColor',
        style: 'default',
        tileMatrixSetID: '250m',
        maximumLevel: 5,
        format: 'image/jpg',
        clock: viewer.clock,
        times: times,
        credit: 'NASA Global Imagery Browse Services for EOSDIS'
      });

      var imageryLayers = viewer.imageryLayers;
      var layer = imageryLayers.addImageryProvider(provider);
      provider.readyPromise.then(function() {
        var start = Cesium.JulianDate.fromIso8601('2019-07-30');
        var stop = Cesium.JulianDate.fromIso8601('2021-09-07');

        // viewer.timeline.zoomTo(start, stop);

        var clock = viewer.clock;
        clock.startTime = start;
        clock.stopTime = stop;
        clock.currentTime = start;
        clock.clockRange = Cesium.ClockRange.LOOP_STOP;
        clock.multiplier = 7200;
        // Make the weather layer semi-transparent to see the underlying geography.
        layer.alpha = 0.5;

        layer.name="MODIS_Terra_CorrectedReflectance_TrueColor";
        layer.title="Terra反射率";
      });
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  .tool-box-left-top {
    display: flex;
    button {
      min-width: 5em;
      background-color: rgba(0, 0, 0, 0.75);
      border-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: all 500ms;
      &:hover {
        opacity: 0.75;
      }
      &.active {
        background-color: rgba(0, 20, 200, 0.75);
      }
    }
  }
}
</style>
